
/**
 * 渲染地图
 * @param {*} dom 绑定地图id
 * @returns {void}
 */
// eslint-disable-next-line import/no-webpack-loader-syntax
// import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'
import Snap from 'snapsvg-cjs'

class RenderChildMap {
  dom:any
  jsonData:any
  svgMap:any
  mapRatio:any
  options:any
    
  constructor (dom:any, jsonData:any) {
    this.dom = dom
    this.jsonData = jsonData.features.map((el:any) => ({
      name: el.properties.name,
      color: el.color,
      x: el.properties.x,
      y: el.properties.y,
      center: el.properties.center,
      adcode:el.properties.adcode
    }))
  }

  setOption (option:any) {
    this.options = option
    this.initial()
  }

  initial () {
    this.operateSvgMap()
  }

  // 获取SVG比值的方法
  getMapRatio () {
    const viewBox = this.svgMap.attr('viewBox')
    // 数字为展示地图区域的宽高 svg可能存在偏移，根据实际地图微调
    if (viewBox) {
      this.mapRatio = Math.max(1, Math.max(viewBox.width / 743.984, viewBox.height / 474))
      // this.mapRatio = 1
    }
  }

  operateSvgMap () {
    Snap.load(`./${this.options.svgPath}`, (svg:any) => {
      // 加载svg
      this.initSvgBase(svg)
    })
  }

  // svg的基本设置
  initSvgBase (svg:any) {
    const ctx = this
    this.dom.append(svg.node)

    // svgMap => svg标签内的id
    this.svgMap = Snap('#svgChildMap')

    this.getMapRatio()
    const svgMapBj = this.svgMap.select('#pathChildGroup')
    const path = this.svgMap.selectAll('path')
    // const f1 = this.svgMap.paper.filter(Snap.filter.shadow(this.mapRatio, 6 * this.mapRatio, 0, '#093075', 1))
    const f2 = this.svgMap.paper.filter(Snap.filter.shadow(2 * this.mapRatio, 15 * this.mapRatio, 1, '#D1CBCB', 1))
    const svgMapBjClone = svgMapBj.clone()

    // 给每个区域默认填充色
    // const colorArr = ['#F38C8F', '#ECCE8D', '#F7FD91', '#F7FD91', '#AFE168', '#F8C586', '#F7FD91', '#F38C8F']
    // const colorArr = ['#000000', '#FF3A30', '#FF9502', '#34C758', '#B886F8', '#007AFF', '#BBBBBB', '#FFFFFF']
    path.forEach((value:any, index:any) => {
      const text = this.svgMap.paper.text(this.jsonData[index].x, this.jsonData[index].y, this.jsonData[index].name)
      // const textlab = this.svgMap.paper.text(this.jsonData[index].x-20,this.jsonData[index].y+20,this.jsonData[index].center[0]+','+this.jsonData[index].center[1])
      text.attr({
        style: 'width: 12px; height: 12px; fill: #101010; font-size: 12px; transition: all linear 0.3s;'
      })
      // textlab.attr({
// style: 'width: 12px; height: 12px;text-strong:300; fill: #101010; font-size: 8px; transition: all linear 0.3s;'

      // })
      const icon = this.svgMap.paper.image('./map/dangwei.png', this.jsonData[index].x + 15, this.jsonData[index].y - 27, 12, 12)
      icon.click(function () {
        icon.remove()
        // ctx.clickDw && ctx.clickDw(index)
      })
      value.attr({
        fill: this.jsonData[index].color,
        opacity: 1,
        stroke: 'rgba(0, 0, 0, .3)',
        strokeWidth: 1
      }).data('isActive', false)
    })
    const path1 = svgMapBjClone.selectAll('path')
    path1.forEach((value:any, index:any) => {
     
      value.attr({
        // filter: f1,
        fill: this.jsonData[index].adcode == 632801?'#d9363e':this.jsonData[index].color,
        stroke: 'rgba(0, 0, 0, .3)',
        strokeWidth: 1 * this.mapRatio
      }).hover(function () {
        // 移入
        console.log(ctx.jsonData[index].name, 'this.jsonData[index].name')
        console.log(ctx.jsonData[index].center)
        // ctx.svgMap.paper.text(50,50,ctx.jsonData[index].center)
        value.attr({
          fill: '#acb6ee' // 浅紫色
        })
      }, function () {
        // 移出
        value.attr({
          fill: ctx.jsonData[index].adcode == 632801?'#d9363e':ctx.jsonData[index].color,
        })
      })
    })
    // 使用默认2像素模糊.select('path')
    svgMapBj.selectAll('path').attr({
      filter: f2,
      // fill: '#0049A1',
      stroke: 'rgba(0, 0, 0, .3)',
      strokeWidth: 2 * this.mapRatio
    })
    svgMapBjClone.attr({
      id: 'svgMapBjClone'
    })
  }
}
export default RenderChildMap
